::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: linear-gradient(@primary-color-4 20%, @primary-color-5 80%);
  box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, .45),inset -2px -2px 2px @primary-color-4;
}

::selection {
  background: @primary-color;
}

body {
  font-size: 14px;
  background-color: #ffffff;
}

ol, p, ul {
  line-height: 1.7;
}

ol, ul {
  padding-left: 24px;
}


a {
  color: @primary-color;
  transition: .25s;

  &:hover {
    color: @primary-color;
  }
}

.ant-btn {
  &:hover,
  &:focus {
    color: @primary-color-5;
    border-color: @primary-color-5;
  }

  &-primary {
    background-color: @primary-color;
    border-color: @primary-color;

    &:hover,
    &:focus {
      color: #ffffff;
      background-color: @primary-color-5;
      border-color: @primary-color-5;
    }
  }
}

.ant-menu-vertical {
  .ant-menu-item {
    &:after {
      border-right: 3px solid @primary-color;
    }
  }

  &-left,
  &-right {
    .ant-menu-item {
      &:after {
        border-right: 3px solid @primary-color;
      }
    }
  }
}

.ant-menu-inline {
  .ant-menu-item {
    &:after {
      border-right: 3px solid @primary-color;
    }
  }
}

.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
  background: linear-gradient(to right, @primary-color, @primary-color);;
}

.ant-menu-horizontal {
  & > .ant-menu-item {
    a {
      &:hover {
        color: @primary-color;
      }
    }

    &:hover {
      border-bottom: 2px solid @primary-color;
      color: @primary-color;
    }
  }

  & > .ant-menu-submenu {
    &:hover {
      border-bottom: 2px solid @primary-color;
      color: @primary-color;
    }
  }

  & > .ant-menu-item-active,
  & > .ant-menu-submenu-active,
  & > .ant-menu-item-open,
  & > .ant-menu-submenu-open,
  & > .ant-menu-item-selected,
  & > .ant-menu-submenu-selected {
    border-bottom: 2px solid @primary-color;
    color: @primary-color;
  }

  .ant-menu-item-selected {
    a {
      color: @primary-color;
    }
  }
}

.ant-menu-item-selected {
  & > a {
    color: @primary-color;

    &:hover {
      color: @primary-color;
    }
  }
}

.ant-menu-item {
  & > a {
    &:hover {
      color: @primary-color;
    }
  }

  &:hover {
    color: @primary-color;
  }

  &:active {
    background: @primary-color-1;
  }
}

.ant-menu {
  &:not(.ant-menu-inline) {
    .ant-menu-submenu-open {
      color: @primary-color;
    }
  }

  &:not(.ant-menu-horizontal) {
    .ant-menu-item-selected {
      background-color: @primary-color-1;
    }
  }
}

.ant-menu-item-active,
.ant-menu-submenu-active {
  color: @primary-color;
}

.ant-menu-submenu-title {
  &:hover {
    color: @primary-color;
  }

  &:active {
    background: @primary-color-1;
  }
}

.ant-timeline-item-head-blue {
  border-color: @primary-color;
  color: @primary-color;

  .anticon {
    border-color: @primary-color;
    color: @primary-color;
  }
}

.ant-tag-blue {
  color: @primary-color;
  background: @primary-color-1;
  border-color: @primary-color-4;
}

.ant-btn-link:hover,
.ant-btn-link:focus,
.ant-btn-link:active {
  border-color: transparent;
}

.ant-anchor-link-active {
  & > .ant-anchor-link-title {
    color: @primary-color;
  }
}

.ant-anchor-ink-ball {
  border-color: @primary-color;
}

.ant-list-item-meta-title {
  a {
    &:hover {
      color: @primary-color;
    }
  }
}

.ant-pagination-item {
  &:hover,
  &:focus {
    a {
      color: @primary-color;
    }
  }
}

.ant-pagination-item-active {
  border-color: @primary-color;

  a {
    color: @primary-color;
  }

  &:hover,
  &:focus {
    border-color: @primary-color-5;

    a {
      color: @primary-color-5;
    }
  }
}

.ant-pagination-prev,
.ant-pagination-next {
  &:hover,
  &:focus {
    .ant-pagination-item-link {
      color: @primary-color;
    }
  }
}

.ant-select-open {
  .ant-select-selection {
    border-color: @primary-color-5;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
}

.ant-select-selection {
  &:hover {
    border-color: @primary-color-5;
  }

  &:focus,
  &:active {
    border-color: @primary-color-5;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
}

.ant-select-focused {
  .ant-select-selection {
    border-color: @primary-color-5;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
}

.ant-select-dropdown-menu-item {
  &-active {
    background-color: @primary-color-1;
  }

  &:hover {
    background-color: @primary-color-1;
  }
}

.ant-pagination-options-quick-jumper {
  input {
    &:hover {
      border-color: @primary-color-5;
    }

    &:focus {
      border-color: @primary-color-5;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    }
  }
}

.ant-tabs-nav {
  .ant-tabs-tab {
    &-active {
      color: @primary-color;

      &:hover {
        color: @primary-color-5;
      }
    }

    &:hover {
      color: @primary-color-5;
    }
  }
}

.ant-tabs-ink-bar {
  background-color: @primary-color;
}

.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  &:hover {
    background-color: @primary-color-1;
  }
}

.ant-input {
  &:hover {
    border-color: @primary-color-5;
  }

  &:focus {
    border-color: @primary-color-5;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
}

.ant-input-affix-wrapper {
  &:hover {
    .ant-input {
      &:not(.ant-input-disabled) {
        border-color: @primary-color-5;
      }
    }
  }
}

.ant-breadcrumb {
  a {
    &:hover {
      color: @primary-color;
    }
  }
}

.ant-radio-checked {
  .ant-radio-inner {
    border-color: @primary-color;

    &::after {
      background-color: @primary-color;
    }
  }
}

.ant-radio-inner {
  &::after {
    background-color: @primary-color;
  }
}

.ant-radio {
  &:hover {
    .ant-radio-inner {
      border-color: @primary-color;
    }
  }
}

.ant-radio-input:focus + .ant-radio-inner {
  border-color: @primary-color;
  box-shadow: 0 0 0 3px @primary-color-1;
}

body.dark {
  color: @dark-text-color;
  background-color: @dark-bg-color;

  .ant-select-dropdown {
    background-color: @dark-bg-color;

    &-menu-item {
      color: @dark-text-color;

      &-disabled {
        color: @dark-text-color;
      }

      &-selected {
        background-color: @dark-text-color-10;
      }

      &:hover {
        background-color: @dark-text-color-10;
      }
    }
  }

  .ant-menu-submenu {
    &-popup {
      background-color: @dark-bg-color;
    }

    .ant-menu-item {
      &-selected {
        background-color: @dark-text-color-10;
      }

      &:active {
        background-color: @dark-text-color-10;
      }
    }

    & > .ant-menu {
      background-color: @dark-bg-color;

      a {
        color: @dark-text-color;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .ant-popover {
    &-content {
      & > .ant-popover-arrow {
        border-top-color: @dark-text-color-10;
        border-right-color: @dark-text-color-10;
      }
    }

    &-inner {
      background-color: @dark-text-color-10;

      &-content {
        a {
          color: @dark-text-color;

          &:hover {
            color: @primary-color;
          }
        }
      }
    }

    .ant-menu-item {
      &-selected {
        background-color: @dark-text-color-9;
      }

      &:active {
        background-color: @dark-text-color-9;
      }
    }

    .ant-menu-submenu {
      &-title {
        &:active {
          background-color: @dark-text-color-9;
        }
      }

      & > .ant-menu {
        background-color: @dark-text-color-10;
      }
    }
  }

  .ant-select {
    color: @dark-text-color;

    &-selection {
      border-color: @dark-text-color;
      background-color: @dark-bg-color;
    }

    &-arrow {
      color: @dark-text-color;
    }
  }

  .ant-pagination-options-quick-jumper {
    input {
      color: @dark-text-color;
      background-color: @dark-bg-color;
      border-color: @dark-text-color;
    }
  }

  .ant-empty-description {
    color: @dark-text-color-8;
  }

  .ant-drawer {
    &-content {
      background-color: @dark-bg-color;
    }

    &-header {
      background-color: @dark-bg-color;
      border-bottom-color: @dark-text-color-9;
    }

    &-title {
      color: @dark-text-color;
    }

    &-body {
      .ant-anchor-wrapper {
        background-color: @dark-bg-color;

        .ant-anchor {
          .ant-anchor-ink {
            &::before {
              background-color: @dark-text-color-10;
            }
          }

          .ant-anchor-link {
            &-title {
              color: @dark-text-color-7;

              &-active {
                color: @primary-color;
              }

              &:hover {
                color: @primary-color;
              }
            }
          }
        }
      }
    }
  }
}
